<template>
	<div class="hang-up-wrapper">
		<el-form-item v-if="!hideInput" :label="label" :prop="prop" :required="false">
			<el-input :value="value" :disabled="showDetail" :placeholder="placeholder" minlength="1" maxlength="140" @input="updateValue"></el-input>
		</el-form-item>
		<el-divider></el-divider>
		<div class="end-tips">
			<el-checkbox :value="isCompleted" class="conclude" @change="change">办结</el-checkbox>
			<p class="conclude-text">*标记为办结即表示工作流至此已完成了预定业务目标</p>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		label: {
			type: String,
			default: () => '挂断原因'
		},
		prop: {
			type: String,
			required: true,
			default: () => ''
		},
		placeholder: {
			type: String,
			required: true,
			default: () => '请输入挂断原因'
		},
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		isCompleted: {
			type: Boolean,
			required: true,
			default: () => false
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		hideInput: {
			type: Boolean,
			default: () => false
		}
	},
	methods: {
		updateValue(e) {
			this.$emit('input', this.prop, e);
		},
		change(e) {
			this.$emit('input', 'isCompleted', e);
		}
	},
	mounted() {
		console.log(this.value, this.isCompleted);
	}
};
</script>
